<template>
  <div class="home">
    <el-header class="demo-header">
      <div class="demo-header-box">
        <img class="ex-mgr-10" src="./assets/svg/logo.svg" alt="" />
        <span class="name ex-mgr-10">Exercise Form 表单构建器</span>
        <span class="ver">V0.0.9-dev</span>
      </div>
      <div class="demo-header-box">
        <div class="ex-mgr-10">
          <span>主题色：</span>
          <el-color-picker v-model="color" @change="changColor" />
        </div>
        <div>
          <span>黑夜模式：</span>
          <el-switch
            v-model="dark"
            @change="changDark"
            active-action-icon="Moon"
            inactive-action-icon="Sunny"
          />
        </div>
        <div class="ex-mgl-10">
          <el-link @click="handleOpenDvs">
            测试数据源DVS配置
            <el-icon style="margin-left: 5px" :size="20"
              ><HelpFilled
            /></el-icon>
          </el-link>
        </div>
        <div class="ex-mgl-10">
          <el-link
            @click="
              to('https://pxhnice.github.io/exercise-form-docs.github.io/')
            "
          >
            文档
            <el-icon style="margin-left: 5px" :size="20"><Coin /></el-icon>
          </el-link>
        </div>
        <div>
          <el-icon
            class="ex-mgl-10"
            @click="to('https://gitee.com/pxhgood/exercise-form.git')"
            :size="25"
          >
            <ex-icon-github-fill />
          </el-icon>
        </div>
      </div>
    </el-header>
    <ex-form-designer
      style="flex: 1"
      :dark="dark"
      :form-data="formData"
      :form-json="formJson"
      :template-list="templateList"
      :global-dvs="globalDvs"
    />

    <el-dialog
      v-model="showDvs"
      width="1000"
      title="测试数据源DVS配置"
      @close="handleCloseDvs"
      destroy-on-close
      draggable
      :close-on-click-modal="false"
    >
      <el-alert
        title="在表达式中使用，例如：DVS['xxxx']['xxx']..."
        type="info"
        show-icon
        :closable="false"
      />
      <div class="ex-dialog-box">
        <ex-code-editor
          v-model="dvsCodeValue"
          height="400"
          :dark="dark"
          lang="json"
        />
      </div>
      <template #footer>
        <el-button type="primary" @click="handleConfirmDvs">确认</el-button>
        <el-button @click="handleCloseDvs">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onBeforeMount } from "vue";
import { templateList } from "./constants/temp";
import { cutNight, cutColor } from "./utils/theme";
import { DesFormParams, DesGlobalDvs } from "@exercise-form/core";
import { localStorageUtils } from "@exercise-form/utils";

let storage = localStorageUtils();

const dark = ref(false);
const color = ref("#409eff");
const formData = ref({});
const formJson = reactive({
  formConfig: {},
  widgetList: []
});
const dvsCodeValue = ref("");
const showDvs = ref(false);

const globalDvs = ref<DesGlobalDvs>({
  testBaseUrl: "http://localhost:80/test-api/",
  token: "xxxxxxxxxxxxxxxxxxxxxxxx"
});

const changDark = (value: boolean) => {
  cutNight(value);
};

const changColor = (value: string) => {
  if (value) {
    cutColor(value);
  } else {
    cutColor("#409EFF");
  }
};

const handleOpenDvs = () => {
  dvsCodeValue.value = JSON.stringify(globalDvs.value, null, 2);
  showDvs.value = true;
};

const handleConfirmDvs = () => {
  storage.set("ex-global-dvs", dvsCodeValue.value);
  globalDvs.value = JSON.parse(dvsCodeValue.value);
  showDvs.value = false;
};

const handleCloseDvs = () => {
  dvsCodeValue.value = "";
  showDvs.value = false;
};

const to = (url: string) => {
  window.open(url, "_blank");
};

onBeforeMount(() => {
  let isNight = storage.get("ex-dark") as boolean;
  let themeColor = storage.get("ex-theme-color") as string;
  let dvs = storage.get("ex-global-dvs") as any;
  dark.value = isNight ?? false;
  color.value = themeColor ?? "#409EFF";
  globalDvs.value = dvs ? JSON.parse(dvs) : globalDvs.value;
  changDark(dark.value);
  changColor(color.value);
});
</script>
<style>
html,
body {
  height: 100%;
  margin: 0;
}
#app {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .demo-header {
    display: flex;
    justify-content: space-between;
    height: 50px;
    font-size: 14px;
    .demo-header-box {
      display: flex;
      align-items: center;
      img {
        width: 25px;
        height: 25px;
      }
      .logo {
        font-size: 25px;
      }
      .name {
        font-size: 18px;
        font-weight: bold;
      }
      .ver {
        font-size: 16px;
        color: #989898;
      }
    }
  }
}
</style>
